<template>
  <h2>当前的求和为：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前点击鼠标的坐标为:x:{{ point.x }},y:{{ point.y }}</h2>
</template>

<script>
import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from "vue";

export default {
  name: "Demo",
  setup() {
    let sum = ref(0)
    let point = reactive({
      x: 0,
      y: 0
    })

    function savePoint(event) {
      point.x = event.pageX
      point.y = event.pageY
      console.log(event.pageX, event.pageY)
    }

    onMounted(() => {
      window.addEventListener('click', savePoint)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('click', savePoint)
    })

    return {
      sum,
      point
    }
  }
}
</script>
